<template>
    <div class="home-container">
        <!-- 轮播图 -->
        <el-carousel height="400px" indicator-position="outside" class="banner">
            <el-carousel-item v-for="item in banners" :key="item.id">
                <img :src="item.image" class="banner-image" />
            </el-carousel-item>
        </el-carousel>

        <!-- 分类入口 -->
        <div class="category-entry">
            <div v-for="cat in categories" :key="cat.id" class="category-item" @click="goToCategory(cat.id)">
                <el-icon :size="40"><component :is="cat.icon" /></el-icon>
                <div>{{ cat.name }}</div>
            </div>
        </div>

        <!-- 推荐商品 -->
        <div class="section-title">猜你喜欢</div>
        <el-row :gutter="20">
            <el-col
                v-for="product in recommendProducts"
                :key="product.id"
                :xs="12" :sm="8" :md="6" :lg="4" :xl="4"
            >
                <product-card :product="product" />
            </el-col>
        </el-row>

        <!-- 热门推荐 -->
        <div class="section-title">热门推荐</div>
        <el-row :gutter="20">
            <el-col
                v-for="product in hotProducts"
                :key="product.id"
                :xs="12" :sm="8" :md="6" :lg="4" :xl="4"
            >
                <product-card :product="product" />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ProductCard from '@/components/ProductCard.vue'

export default {
    components: { ProductCard },
    setup() {
        const router = useRouter()

        const banners = ref([
            { id: 1, image: 'https://via.placeholder.com/1200x400/ff0036/ffffff?text=618大促' },
            { id: 2, image: 'https://via.placeholder.com/1200x400/ff5000/ffffff?text=新品上市' },
            { id: 3, image: 'https://via.placeholder.com/1200x400/3366cc/ffffff?text=品质生活' }
        ])

        const categories = ref([
            { id: 1, name: '女装', icon: 'el-icon-shopping-bag-1' },
            { id: 2, name: '男装', icon: 'el-icon-user' },
            { id: 3, name: '美妆', icon: 'el-icon-magic-stick' },
            { id: 4, name: '数码', icon: 'el-icon-mobile-phone' },
            { id: 5, name: '食品', icon: 'el-icon-food' },
            { id: 6, name: '家居', icon: 'el-icon-house' },
            { id: 7, name: '母婴', icon: 'el-icon-present' },
            { id: 8, name: '运动', icon: 'el-icon-basketball' }
        ])

        const recommendProducts = ref([
            {
                id: 1,
                title: '2023新款夏季短袖T恤女装宽松韩版ins潮',
                image: 'https://via.placeholder.com/300x300/ff0036/ffffff?text=女装',
                price: 59.9,
                originalPrice: 99.9,
                sold: 1200,
                shop: '时尚女装旗舰店',
                location: '杭州'
            },
            {
                id: 2,
                title: '华为Mate50 Pro 5G手机 全网通 曜金黑 256GB',
                image: 'https://via.placeholder.com/300x300/3366cc/ffffff?text=手机',
                price: 5899,
                sold: 3500,
                shop: '华为官方旗舰店',
                location: '深圳'
            },
            {
                id: 3,
                title: '纯棉四件套床上用品 简约现代风格',
                image: 'https://via.placeholder.com/300x300/00aa00/ffffff?text=家居',
                price: 299,
                originalPrice: 399,
                sold: 870,
                shop: '家居生活馆',
                location: '南通'
            },
            {
                id: 4,
                title: '进口巧克力礼盒装 情人节礼物',
                image: 'https://via.placeholder.com/300x300/ff5000/ffffff?text=食品',
                price: 128,
                sold: 520,
                shop: '进口食品专营店',
                location: '上海'
            },
            {
                id: 5,
                title: '运动鞋男款透气跑步鞋',
                image: 'https://via.placeholder.com/300x300/663399/ffffff?text=运动',
                price: 259,
                originalPrice: 399,
                sold: 2100,
                shop: '运动户外旗舰店',
                location: '泉州'
            },
            {
                id: 6,
                title: '婴儿连体衣纯棉新生儿衣服',
                image: 'https://via.placeholder.com/300x300/ff99cc/ffffff?text=母婴',
                price: 89,
                sold: 430,
                shop: '母婴用品专卖',
                location: '杭州'
            }
        ])

        const hotProducts = ref([
            {
                id: 7,
                title: '无线蓝牙耳机 降噪运动耳机',
                image: 'https://via.placeholder.com/300x300/3366cc/ffffff?text=耳机',
                price: 199,
                originalPrice: 299,
                sold: 6500,
                shop: '数码配件商城',
                location: '深圳'
            },
            {
                id: 8,
                title: '男士商务休闲裤 夏季薄款',
                image: 'https://via.placeholder.com/300x300/333333/ffffff?text=男装',
                price: 159,
                sold: 3200,
                shop: '男装精品店',
                location: '温州'
            },
            {
                id: 9,
                title: '防晒霜SPF50+ 清爽不油腻',
                image: 'https://via.placeholder.com/300x300/ff99cc/ffffff?text=美妆',
                price: 89,
                originalPrice: 129,
                sold: 4100,
                shop: '美妆护肤专柜',
                location: '广州'
            },
            {
                id: 10,
                title: '全自动咖啡机家用小型',
                image: 'https://via.placeholder.com/300x300/663300/ffffff?text=家电',
                price: 899,
                sold: 870,
                shop: '家电世界',
                location: '佛山'
            },
            {
                id: 11,
                title: '泰国进口金枕头榴莲',
                image: 'https://via.placeholder.com/300x300/ffcc00/ffffff?text=水果',
                price: 129,
                sold: 2500,
                shop: '生鲜水果店',
                location: '昆明'
            },
            {
                id: 12,
                title: '瑜伽垫加厚防滑健身垫',
                image: 'https://via.placeholder.com/300x300/00aa00/ffffff?text=健身',
                price: 69,
                originalPrice: 99,
                sold: 3800,
                shop: '运动健身馆',
                location: '厦门'
            }
        ])

        const goToCategory = (categoryId) => {
            router.push({ path: '/category', query: { id: categoryId } })
        }

        return {
            banners,
            categories,
            recommendProducts,
            hotProducts,
            goToCategory
        }
    }
}
</script>

<style scoped>
.home-container {
    padding: 0 20px;
}

.banner {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-entry {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    background: white;
    margin-bottom: 20px;
    border-radius: 4px;
    flex-wrap: wrap;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    width: 12.5%;
    padding: 10px 0;
}

.category-item:hover {
    color: var(--primary-color);
    transform: translateY(-5px);
}

.category-item .el-icon {
    margin-bottom: 8px;
}

.el-row {
    margin-bottom: 20px;
}
</style>